<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
    <!-- 引入样式 组件库-->
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/vue-router-2.0.0.js"></script>
    <style>
        .continer {
            display: flex;
        }

        h3 {
            margin: 0;
            padding: 0;
            font-size: 16px;
        }

        html, body {
            margin: 0;
            padding: 0;
        }

        .header {
            background-color: blue;
            height: 50px;
        }

        .lefter {
            background-color: lightgreen;
            flex: 2;
            height: 800px;
        }

        .mainBox {
            background-color: yellow;
            flex: 8;
            height: 800px;
        }
    </style>
</head>
<body>
<div id="app">
    <router-view></router-view>
    <div class="continer">
        <!--命名视图-->
        <router-view name="lefter"></router-view>
        <router-view name="mainBox"></router-view>
    </div>

</div>
</body>
<script>

    let header = {
        template: `<h3 class="header">头部组件</h3>`
    };

    let lefter = {
        template: `<h3 class="lefter">左侧导航组件</h3>`
    };
    let mainBox = {
        template: `<h3 class="mainBox">主要内容组件</h3>`
    };

    let vueRouter = new VueRouter({
        routes: [
            {
                path: '/', components: {
                    default: header,
                    lefter: lefter,
                    mainBox: mainBox,
                }
            }
        ]
    });

    let vm = new Vue({
        el: "#app",
        data() {
            return {}
        }, methods: {},
        router: vueRouter //将路由规则对象，注册到vue示例上，用来监听URL地址的变化，然后展示对应的组件
        //加入router属性，运行该页面，地址末端会增加 #/
    });
</script>
</html>
